<template>
	<view>
		<!-- 发车车次信息 -->
		<view class="truck_item">
			<view class="div_item">
				<view>到站<span>{{truck.addrto}}</span></view>
				<view>卸货点 <span>{{truck.addrxhd}}</span></view>
			</view>
			<view class="div_item">
				<view>发车单号<span>{{sendNo}}</span></view>
				<!-- <view>装车单号<span>{{truck.loadno}}</span></view> -->
			</view>
			<view class="div_item">
				<view>车牌号码<span>{{truck.vehicleno}}</span></view>
				<view>发车时间<span>{{sendDt}}</span></view>
			</view>
			<view class="div_item">
				<view>司机姓名<span>{{truck.drivername}}</span></view>
				<view>联系电话<span>{{truck.drivertel}}</span></view>
			</view>

			<view class="div_item">
				<view>装车运单<span>{{truck.detailModel ? truck.detailModel.length : 0}}单</span></view>
				<!-- <view>装车单号<span>{{truck.loadno}}</span></view> -->
			</view>

			<!-- 运单列表 -->
			<view class="order_list_div">
				<view v-for="(item,index) in order_list" :key="item.docid" class="order_list_item"
					@click.stop="onMarkOrder(item,index)">
					<view class="div_order_item">
						<view>货物<span>{{item.goodsname}}</span></view>
						<view>数量<span>{{item.goodsquantity}}</span></view>
					</view>
					<view class="div_order_item">
						<view>目的地<span>{{item.addrto.name}}</span></view>
						<view>卸货点<span>{{item.addrxhd.nodeName}}</span></view>
					</view>
					<view class="div_order_item">
						<view>发货人<span>{{item.sendername}}</span></view>
						<view>电话<span>{{item.sendertel}}</span></view>
					</view>
					<view class="div_order_item">
						<view>收货人<span>{{item.receivername}}</span></view>
						<view>电话<span>{{item.receivertel}}</span></view>
					</view>
					<view class="div_order_item">
						<view>运单号<span>{{item.docno}}</span></view>
						<view><span></span></view>
					</view>
					<view class="div_order_item">
						<view></view>
						<view style="display: flex;align-items: center;">
							是否收取运费
							<image :src="item.is_sel ? img_yes : img_no" style="width: 40rpx;height: 40rpx;">
							</image>
						</view>

						<view></view>
					</view>
				</view>
			</view>

			<view class="scan_div">
				<view class="btn_scan" @click.stop="onOk">发车</view>
			</view>

		</view>
	</view>
</template>

<script>
	import { tsToDateAndTime, tsToDateFormat } from '@/utils/util.js'
	export default {
		data() {
			return {
				img_yes: '/static/img/ic_mark_yes.png',
				img_no: '/static/img/ic_mark_no.png',
				truck: {}, // 传过来的车次数据
				order_list: [], // 记录装车运单列表
				sendNo: `FC${tsToDateAndTime(new Date(),'','','')}`, // 发车单号
				sendDt: tsToDateFormat(new Date()), // 发车时间
				arriveTime: tsToDateFormat(new Date().getTime() + 259200000), // 预计到达
			}
		},
		methods: {

			// 标记运单
			onMarkOrder(item, index) {
				this.order_list = this.order_list.map((item, idx) => {
					if (index == idx) {
						item.is_sel = !item.is_sel
					}
					return item
				})
			},

			// 确认发车
			async onOk() {
				let that = this
				// console.log('arriveTime = ', this.arriveTime);
				console.log('生成的运单ids = ', that.genOrderIds());
				uni.showModal({
					title: `提示`,
					content: `是否确认发车？`,
					success: async res => {
						if (res.confirm) {
							that.postDocSend()
						} else if (res.cancel) {
							console.log('确认发车,用户点击取消');
						}
					}
				})
			},

			async postDocSend() {
				let that = this
				let uinfo = this.$getUserInfo()
				let res = await that.$post_docsend({
					transferid: that.truck.transferid,
					memberid: uinfo.company_tms_id,
					accountid: uinfo.user_tms_id,
					addrXHD: that.truck.xhd,
					sendNo: that.sendNo,
					sendDt: that.sendDt,
					arriveTime: that.arriveTime,
					driver: that.truck.drivername,
					driverTel: that.truck.drivertel,
					// driverCard: that.truck.drivercard, 
					gpsName: 'gpsName',
				})
				// console.log('postDocSend.res = ', res);
				if (res.statuscode == 200) {

					uni.$emit('onSendSuccess', {})
					uni.showModal({
						title: `提示`,
						content: `发车成功！`,
						showCancel: false,
						success: async res => {
							if (res.confirm) {
								uni.navigateBack()
							} else if (res.cancel) {
								console.log('发车成功,用户点击取消');
							}
						}
					})

					// 全球通发车成功 进行顺和物联发车
					let res_shwl = await that.$post_send({
						id: that.truck.transferid,
						waybill_id: that.genOrderIds(),
					})
					console.log('顺和物联发车.res_shwl = ', res_shwl);

				} else {
					that.$toast(res.msg)
				}

			},

			// 生成装车运单id列表数据
			genOrderIds() {
				let that = this
				let order_ids = []
				if (that.order_list && that.order_list.length > 0) {
					that.order_list.forEach((item, index) => {
						if (item.is_sel) order_ids.push(item.docid)
					})
					return order_ids
				}
				return []
			},

		},

		onLoad(opts) {
			// console.log('发车页面收到的数据 = ', opts.truck);
			this.truck = JSON.parse(opts.truck)
			this.order_list = this.truck.detailModel
		},

	}
</script>

<style scoped>
	.truck_item {
		padding: 14rpx;
		/* border: solid 1rpx rgba(0, 0, 0, 0.15); */
		/* border-radius: 10rpx; */
		position: fixed;
		left: 0;
		right: 0;
		background-color: white;
	}

	.div_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 14rpx 14rpx 0 14rpx;
		font-size: 28rpx;
	}

	span {
		/* display: block; */
		margin: 0 0 0 10rpx;
		color: #1890FF;
		font-size: 26rpx;
	}

	.scan_div {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: rgba(0, 0, 0, 0.55);
		margin: 20rpx 0 0 0;
	}

	.btn_scan {
		width: 288rpx;
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
		color: white;
		background-color: #1890FF;
		border-radius: 8rpx;
		margin: 40rpx 0 0 0rpx;
	}

	.order_list_div {
		background-color: white;
	}

	.order_list_item {
		margin: 20rpx 20rpx 20rpx 20rpx;
		border: solid 1rpx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
		padding: 0 0 14rpx 0;
	}

	.div_order_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 14rpx 14rpx 0 14rpx;
		font-size: 28rpx;
	}
</style>